<template>
  <div class="top-menu">
    <template>
      <scrollView>
        <!--        <el-menu-->
        <!--          :default-active="activeIndex"-->
        <!--          mode="horizontal"-->
        <!--          text-color="#999"-->
        <!--          active-text-color="#333"-->
        <!--          unique-opened-->
        <!--        >-->
        <!-- 基地空间 -->
        <!-- <el-menu-item index="0" @click.native="openHome(itemHome)" key="0">
        <template slot="title">
          <i :class="itemHome.source"></i>
          <span>{{ generateTitle(itemHome) }}</span>
        </template>
      </el-menu-item> -->
        <!-- 部门空间 -->
        <!-- <el-menu-item index="1" @click.native="HeadSpace('/departmentalSpace')" key="1">
          <template slot="title">
            <i :class="itemHome.source"></i>
            <span>部门空间</span>
          </template>
        </el-menu-item> -->
        <!-- 首长空间 -->
        <!-- <el-menu-item index="1" @click.native="HeadSpace('/HeadSpace')" key="1">
          <template slot="title">
            <i :class="itemHome.source"></i>
            <span>首长空间</span>
          </template>
        </el-menu-item> -->
        <!-- 个人空间 -->
        <!-- <el-menu-item index="1" @click.native="HeadSpace('/personalSpace')" key="1">
          <template slot="title">
            <i :class="itemHome.source"></i>
            <span>个人空间</span>
          </template>
        </el-menu-item> -->
        <!-- <el-submenu v-if="item.children">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>

          </el-submenu> -->
        <!-- 菜单跳转 -->
        <template v-for="(item, index) in items">
          <el-menu-item
            v-if="validatenull(item.children)"
            :index="item.id + ''"
            @click.native="openMenu(item)"
            :key="index"
          >
            <template slot="title">
              <i :class="item.source" style="padding-right: 5px"></i>
              <span>{{ generateTitle(item) }}</span>
            </template>
          </el-menu-item>
          <el-submenu
            :index="item.id + ''"
            :key="index"
            v-else-if="!validatenull(item.children)"
          >
            <template slot="title">
              <i :class="item.source" style="padding-right: 5px"></i>
              <span>{{ generateTitle(item) }}</span>
            </template>
            <el-menu-item
              class="el-submenu"
              v-for="(chil, indexs) in item.children"
              :key="index + '_' + indexs"
              :index="chil.id + ''"
              @click.native="openMenu(chil)"
            >
              <template slot="title">
                <i :class="chil.source" style="padding-right: 5px"></i>
                <span>{{ generateTitle(chil) }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </template>
      </scrollView>
    </template>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import scrollView from "../sidebar/scrollView";
import {validatenull} from "@/util/validate";

export default {
  name: "top-menu",
  components: {
    scrollView,
  },
  data() {
    return {
      itemHome: {
        name: "基地空间",
        source: "el-icon-menu",
      },
      itempage: {
        name: "系统首页",
        source: "el-icon-menu",
      },
      activeIndex: "0",
      items: [],
      loginSu: false,
    };
  },
  inject: ["index"],
  created() {
    this.loginSu = true;
    this.getMenu();
    this.loginSu = false;
  },
  computed: {
    ...mapGetters(["tagCurrent", "menu"]),
  },
  methods: {
    validatenull(val) {
      return validatenull(val);
    },
    HeadSpace(path) {
      let routeData = this.$router.resolve({
        path: path,
      });
      window.open(routeData.href, "_blank");
    },
    openHome(itemHome) {
      if (this.index) {
        this.index.openMenu(itemHome);
      }
      this.$router.push({
        path: this.$router.$avueRouter.getPath(
          {name: itemHome.name, src: ""},
          {}
        ),
      });
    },
    getItem(data) {
      let that = this;
      if (data[0] && data[0].children && data[0].children.length > 0) {
        return that.getItem(data[0].children);
      } else if (data[0]) {
        return data[0];
      }
    },
    openMenu(item) {
      console.log(item, "item");
      if (item.categoryName == "0") {
        let that = this;
        // this.$store.dispatch("GetMenu", item.id).then((data) => {
        this.$store.dispatch("GetTopMenuFirstLocal", item.id).then((data) => {
          let itemMenu = that.getItem(data);
          let name = itemMenu.name;
          let path = itemMenu.path;
          // 应该记录  最后跳转时的 tag, 此处tag存在 则跳转次tag不存在跳转 第一个
          that.$router.push({
            path: that.$router.$avueRouter.getPath({name: name, src: path}),
            // query:{
            //   id:item.id
            // }
          });
        });
      } else if (item.categoryName == "1") {
        this.$router.push({path: item.path});
      } else if (item.categoryName == "2") {
        window.open(item.path, "_blank");
      }
    },
    getMenu() {
      this.$store.dispatch("GetTopMenu").then((res) => {
        this.items = res;
        this.$store.dispatch("GetTopMenuFirstLocal", window._CONFIG.topMenuId).then(() => {
          // let itemMenu = that.getItem(data);
          // let name = itemMenu.name;
          // let path = itemMenu.path;
          // 应该记录  最后跳转时的 tag, 此处tag存在 则跳转次tag不存在跳转 第一个
          // that.$router.push({
          //   path: that.$router.$avueRouter.getPath({ name: name, src: path }),
          //   // query:{
          //   //   id:item.id
          //   // }
          // });
        });
        // if (this.loginSu) {
        //   this.$router.push({
        //     path: that.$router.$avueRouter.getPath({
        //       name: "oa首页",
        //       src: "/systemPages/homepage",
        //     }),
        //   });
        // }
      });
    },
    generateTitle(item) {
      return this.$router.$avueRouter.generateTitle(
        item.name,
        (item.meta || {}).i18n
      );
    },
  },
};
</script>
<style>
.el-menu--horizontal > .el-menu-item,
.el-menu--horizontal > .el-submenu {
  float: none !important;
  display: inline-block !important;
}
</style>
